<template>
    <div class="topbox">
        <div class="topbox-lef">
            <van-icon name="arrow-down" class="arrow-down" />
        </div>
        <div class="topbox-cent">
         
                <span class="commodity">商品</span>
       

           <router-link to="/det-pinglun" >
               <span class="evaluate">评价</span>
            </router-link>

           <router-link to="/det-dapei" >
               <span class="menu">搭配</span>
           </router-link>

           <router-link to="/det-xiangqing" >
               <span class="detail">详情</span>
            </router-link>

           <router-link to="/det-tuijian" >
               <span class="recommend">推荐</span>
           </router-link>
             <!-- 设置路由出口 -->
          <router-view></router-view>
        </div> 
        <div class="topbox-rig">
            <span><van-icon name="share-o"  class="share-o"/></span>
            <span><van-icon name="cart-o"  class="cart-o" /></span>
        </div>
        <lunbo/>
    </div>
           
  
</template>

<script>

export default {
    components:{
     
    },
     
}
</script>

<style scoped>
    .topbox{
        width:100%;
        height: 0.4rem;
        /* background-color: hotpink; */
        border:1px solid #999999;
        border-top-left-radius:0.05rem;
        border-top-right-radius:0.05rem;
        z-index: 666;
        color: #888888;
   
    }
    .topbox-lef{
        width:10%;
        height:0.4rem;
        /* background-color:pink; */
        margin-left: 0;
        float: left;
    }
    .topbox-cent{
     width:75%;
      height:0.4rem;
      /* background-color: cadetblue; */
      float: left;
      display: flex;;   
      justify-content:space-evenly;
      line-height: 0.4rem;   
    }
    .topbox-rig{
        width:15%;
        height:0.4rem;
      /* background-color:hotpink; */
      float: left;;    
    }
    .arrow-down{
        font-size: 0.2rem;
         line-height: 0.4rem;
         margin-left: 0.05rem;  
    }
    .share-o, .cart-o{
        font-size: 0.2rem;
         line-height: 0.4rem;
         margin-left: 0.05rem;  
    }
     .commodity{
         color: #777777;
     }
     .evaluate{
          color: #777777;
     }
     .menu{
          color: #777777;
     }
     .detail{
          color: #777777;
     }
     .recommend{
          color: #777777;
     }
     /* .commodity, .evaluate, .menu, .detail, .recommend{} */
    
</style>